某次面試被問到 useState 的 object 與 function 的概念,阿我這個只接觸過 react 16.8 之後的半路出家工程師又是一問三不知了。useState 不就是設定一個值以及能修改這個值的 function 而已嗎,什麼 object? 所以今天就來深入了解一下 useState 吧。
大家都知道 useState 長相如下吧:
const [state, setState] = useState(initialState);
useState
宣告我們整個 component 裡可引用的 state
變數,再設定可改變 state 的 function setState
,以及其初始值 initialState
。
大家有發現嗎
宣告 state 變數時使用了方括號:
等號左邊我們命名的 state 變數
這個 JavaScript 語法叫做陣列解構賦值。這代表我們宣告了兩個新的變數state
和setState
,state
,setState
被設為useState
回傳的第一跟第二個值。與下方程式碼相同:var stateVariable = useState(initialState); // 回傳一對值 var state = stateVariable[0]; // 第一個值 var setState = stateVariable[1]; // 第二個值
當我們使用 useState 宣告 state 變數,他會回傳一對在 array 裡的值。
第一個值是目前 state 的值,第二個是一個可以更新 state 的 function。因為它們有特殊的意義,用 [0] 和 [1] 來存取它們的話會令人困惑。所以我們使用陣列解構賦值來命名它們。
引用自官網
而當 state 改變時我們的 component 就會重新渲染,不過並不是每次改變就會渲染喔,而是要利用我們宣告的 setState 去做 state 的更動才行。
而上方提到的 useState object 部分其實是比照 class component 才會有的問題,因為在 class component 時的 state 他是以 object 的方式呈現,如下方範例:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
(object 部分是我個人解讀,歡迎任何當過面試官的人來糾正我,拜託~)
關於更多 class component 大家可看我這 codepen 範例 ,很眼熟是吧,我懶得寫新的都用之前文章用過的範例ㄏㄏ。
不過在 useState 時其實並不受此限制,想使用任何型態的 state 都可以。不像 class 的 this.setState
會合併原本的 state,這裡更新 state 變數會直接取代舊變數。